<template>
  <div class="address-line"
       @click="showDialog()">
    <div class="address-line-span">
      <span :class="{'address-line-span-selected': selectedValue.trim().length > 0 }">{{showText}}</span>
    </div>
    <div class="address-line-img"
         v-if="showRight"></div>
    <address-dialog :isVisible="showAddress"
                    :provincename="provincename"
                    :cityname="cityname"
                    :areaname="areaname"
                    @operaDialog="operaDialog"></address-dialog>
    <!-- :defaultValue="defaultValue" -->
  </div>
</template>
<style lang="stylus">
.address-line {
  width: 100%;
  // height: 100px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;

  .address-line-img {
    display: flex;
    align-items: center;
    // img {
    // width: 100%;
    // height: 18px;
    // }
    background-image: url('~@image/arrow-right-small.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
  }

  .address-line-span {
    display: flex;

    span {
      color: rgba(153, 153, 153, 1);
      text-align: center;
      font-size: 30px;
    }

    .address-line-span-selected {
      color: RGBA(51, 51, 51, 1);
      font-size: 30px;
    }
  }
}
</style>
<script>
import addressDialog from './address-dialog'

export default {
  name: 'mk-picker',
  props: {
    defaultValue: {
      default () {
        return {
          provincecode: '',
          provincename: '',
          citycode: '',
          cityname: '',
          areacode: '',
          areaname: ''
        }
      }
    },
    showRight: {
      default: true,
      type: Boolean
    }
  },
  data () {
    return {
      showText: '请输入省市区',
      selectedValue: '',
      showAddress: false,
      provincename: '',
      cityname: '',
      areaname: '',
      provincecode: '',
      citycode: '',
      areacode: ''
    }
  },
  mounted () {
    this.setDefaultAddress(this.defaultValue)
  },
  methods: {
    showDialog () {
      this.showAddress = true
    },
    // 检查字符串是否为空或者空字符串
    checkValue (value) {
      if (value && value.length > 0) {
        return true
      }
    },
    // 设置显示的默认值
    setDefaultAddress (value) {
      if (value &&
          this.checkValue(value.provincename) &&
          this.checkValue(value.cityname) &&
          this.checkValue(value.areaname)) {
        this.selectedValue = value.provincename + value.cityname + value.areaname
        this.provincename = value.provincename
        this.cityname = value.cityname
        this.areaname = value.areaname
        this.provincecode = value.provincecode
        this.citycode = value.citycode
        this.areacode = value.areacode
      }
    },
    // 显示或者隐藏底部的地址选择器
    operaDialog (isShow, obj) {
      // 如果时点击确定按钮后，obj对象不为空
      if (obj) {
        // 设置到界面
        this.selectedValue = obj.provincename + obj.cityname + obj.areaname
        this.showText = this.selectedValue
        // 设置 省市区
        this.defaultValue.provincename = obj.provincename
        this.defaultValue.cityname = obj.cityname
        this.defaultValue.areaname = obj.areaname
        this.defaultValue.provincecode = obj.provincecode
        this.defaultValue.citycode = obj.citycode
        this.defaultValue.areacode = obj.areacode
        // 设置下次打开选择器后的默认数据
        this.provincename = obj.provincename
        this.cityname = obj.cityname
        this.areaname = obj.areaname
        this.provincecode = obj.provincecode
        this.citycode = obj.citycode
        this.areacode = obj.areacode
      }
      // 关闭选择器
      this.showAddress = false
    }
  },
  watch: {
    selectedValue (data) {
      this.showText = data
    },
    defaultValue: {
      handler () {
        this.setDefaultAddress(this.defaultValue)
      },
      deep: true
    }
  },
  components: {
    addressDialog
  }
}
</script>
